/*
 * @Author: 康为 18037890117@163.com
 * @Date: 2023-08-07 14:06:08
 * @LastEditors: 康为 18037890117@163.com
 * @LastEditTime: 2023-08-07 14:10:27
 * @FilePath: /umi-max/src/modules/Cards/ThreeCube/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import * as React from 'react';
import * as THREE from 'three';
function ThreeCube() {
  const divRef = React.useRef<HTMLDivElement | null>(null);
  React.useEffect(() => {
    const width = divRef.current?.clientWidth;
    const height = divRef.current?.clientHeight;
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    divRef.current?.appendChild(renderer.domElement);

    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 5;
    function animate() {
      requestAnimationFrame(animate);

      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;

      renderer.render(scene, camera);
    }

    animate();
  }, [divRef]);
  return <div ref={divRef} style={{ width: '300px', height: '300px' }}></div>;
}

export default ThreeCube;
